<!--
 * @Author: long
 * @Date: 2021-09-10 10:26:42
 * @LastEditTime: 2021-11-09 15:11:35
 * @LastEditors: Please set LastEditors
 * @Description: 订单管理
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\finance-center\order-manage\index.vue
-->
<template>
  <div class="app_container">
    <div class="box_style order_manage" v-if="showOther == '1'">
      <div class="search_box">
        <div class="title">订单列表</div>
        <div class="search">
          <a-button type="primary" class="mr10" @click="getTableList">刷新</a-button>
          <a-button type="primary" @click="hepsPay">批量支付</a-button>
        </div>
      </div>
      <a-table
        :scroll="{ y: 600 }"
        :rowKey="(tableDatas) => tableDatas.id"
        class="order_manage_table"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :loading="loading"
      >
        <span slot="orderNumber" slot-scope="text" class="theme_col">{{ text }}</span>
        <span slot="amount" slot-scope="text, record" class="table-operation">
          <span>￥{{ text }}</span>
        </span>
        <span slot="orderStatus" slot-scope="text, record" class="table-operation">
          <span
            class="pl10"
            :class="[record.orderStatus2 == 1 ? 'done' : record.orderStatus2 == 2 ? 'no' : 'cancel']"
            >{{ text }}</span>
        </span>
        <span slot="operation" slot-scope="text, record" class="table-operation">
          <span class="theme_col pointer">支付</span>
          <span class="theme_col ml10 mr10 pointer" @click="goToDetail(record)" >查看</span>
          <a-popconfirm placement="bottom" ok-text="取消" cancel-text="返回" @confirm="cancelOrder_handle(record)">
          <template slot="title">
            <p>订单取消后不可恢复，是否取消？</p>
          </template>
          <span class="danger_col pointer">取消</span>
         </a-popconfirm>
        </span>
      </a-table>

       <a-pagination
        right
        hideOnSinglePage
        show-quick-jumper
        showSizeChanger
        :default-current="pagingQuery['current']"
        :defaultPageSize="pagingQuery['size']"
        :total="pagingQuery['total']"
        :show-total="total => `共 ${total} 条`"
        :page-size-options="['20', '40', '60', '80', '90', '100']"
        @change="handleCurrentChange"
        @showSizeChange="handleSizeChange"
      />
    </div>

    <div class="box_style order_manage" v-else-if="showOther == '2'">
      <pay-info :order-number="orderNumber" :order-status="payFlag" :createTime="orderCreateTime" :orderTime="orderPayTime"></pay-info>
      
      <div class="order_info">
        <div class="table_tit_txt">订单详情</div>
        <a-table class="order_table" :columns="columnsConfirmOrder" :data-source="shoppingList" :pagination="paginationTable">
          <span slot="price" slot-scope="text"> <span>￥{{ text }}</span></span>
          <span slot="orderAmount" slot-scope="text"> <span>￥{{ text }}</span></span>
        </a-table>
        <div class="pay_confirm_money">
          <div class="product_money"> <span>产品金额：</span><span>￥6800</span></div>
          <div class="product_discount"> <span>折扣金额：</span><span>-￥0.00</span></div>
          <div class="product_actual"> <span>折扣金额：</span><span style="color: #faad14">￥6800</span></div>
        </div>
      </div>
      <div class="order_pay">
        <div class="table_tit_txt pay_type_title">支付方式</div>
        <a-radio-group v-model="payTypeValue" class="pay_type_radio">
          <img src="@/assets/image/wechatpay.png" />
          <a-radio :value="1">微信支付</a-radio>
          <img src="@/assets/image/alipay.png" />
          <a-radio :value="2">支付宝支付</a-radio>
        </a-radio-group>
        <div class="pay_type_action">
          <div class="pay_type_action_inner">
            <span class="back">返回订单列表</span>
            <span class="cancel">取消订单</span>
            <a-button type="danger" @click="goToPay"> 立即支付 </a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="box_style order_manage" style="background: #e3e8f6" v-else-if="showOther == '3'">
      <div class="pay_container">
        <a-icon
          @click="goToPayPage"
          style="
            font-size: 24px;
            color: #1890ff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 25px;
          "
          type="arrow-left"
        />
        <div class="pay_container_logo">
          <img :src="payTypeValue == '1' ? wxPayLogo : aliPayLogo" />
          <span>{{ payTypeValue == "1" ? "微信支付" : "支付宝支付" }}</span>
        </div>
      </div>
      <div class="pay_container_info">
        <div class="pay_info_top">
          支付金额<span style="color: red">￥300</span>，请使用{{
            payTypeValue == "1" ? "微信" : "支付宝"
          }}扫描下方二维码完成支付
        </div>
        <div class="pay_info_mid">
          <div class="left">
            <img
              style="
                display: inline-block;
                background: red;
                width: 100%;
                height: 100%;
              "
            />
          </div>
          <div class="right">
            <div class="right_item">
              <span>商家名称：</span>
              <span class="right_name">北京华捷艾米科技有限公司</span>
            </div>
            <div class="right_item">
              <span>商品名称：</span>
              <span class="right_name">人脸识别订单支付</span>
            </div>
            <div class="right_item">
              <span>交易单号：</span>
              <span class="right_name">53fc45dejdiejdiejdiejdiejdiejd</span>
            </div>
            <div class="right_item">
              <span>创建时间：</span>
              <span class="right_name">2021-07-01 15:55:24</span>
            </div>
          </div>
        </div>
        <div class="pay_info_bottom">客服电话：4008-777-818</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listOrder, orderDetail, delOrder } from "@/api/finance-center/orderManage"
import PayInfo from "./components/payInfo.vue"
import wxPayLogo from "@/assets/image/wechatpay.png"
import aliPayLogo from "@/assets/image/alipay.png"

const columns = [
  { title: "订单号", dataIndex: "orderNumber", scopedSlots: { customRender: "orderNumber" } },
  { title: "状态", dataIndex: "orderStatus", scopedSlots: { customRender: "orderStatus" } },
  { title: "是否开发票", dataIndex: "whetherReceipt" }, 
  { title: "订单金额", dataIndex: "amount", scopedSlots: { customRender: "amount" } },
  { title: "下单时间", dataIndex: "createTime" },
  { title: "操作", key: "operation", scopedSlots: { customRender: "operation" }},
]

const columnsConfirmOrder = [
  { title: "产品类型", dataIndex: "chargePlanIdTitle", key: "chargePlanIdTitle"},
  { title: "产品名称", dataIndex: "titleName", key: "titleName" },
  { title: "产品规格", dataIndex: "unitPriceName", key: "unitPriceName" },
  { title: "产品数量", dataIndex: "purchaseQuantity", key: "purchaseQuantity" },
  { title: "购买时长", dataIndex: "purchaseTime", key: "purchaseTime" },
  { title: "单价", dataIndex: "price", key: "price", scopedSlots: { customRender: "price" } },
  { title: "计费方式", dataIndex: "billingMethod", key: "billingMethod" },
  { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", scopedSlots: { customRender: "orderAmount" } },
]

export default {
  data() {
    return {
      columns: [{ title: "序号", width: 90, customRender: (text, record, index) => `${(this.pagingQuery.current - 1) * this.pagingQuery.size + index + 1}`  }, ...columns],
      loading: true,
      aliPayLogo,
      columnsConfirmOrder,
      data: [],
      selectedRows: [],
      showOther: "1",
      paginationTable: false,
      shoppingList: [
        {
          key: 1,
          chargePlanIdTitle: "按QPS计费",
          titleName: "人脸检测",
          unitPriceName: "期限：2021.07.01-2021.07.08",
          purchaseQuantity: "200QPS",
          purchaseTime: "10天",
          price: "150",
          billingMethod: "按月",
          orderAmount: "2500",
        },
      ],
      pagingQuery: {
        current: 1,
        size: 20,
        total: 20,
      },
      orderNumber: "",
      productName: "",
      payFlag: "",
      orderCreateTime: "",
      orderPayTime: "",
      payTypeValue: 1,
    };
  },
  components: {
    PayInfo,
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      }
    },
  },
  methods: {
    async goToDetail(record) {
      const { id, userId, orderNumber, createTime, completeTime, orderStatus } = record
      this.orderNumber = orderNumber
      this.productName = "人脸识别、人脸检测"
      this.orderCreateTime = createTime;
      this.orderPayTime = completeTime == null ? "--" : completeTime;
      this.payFlag = orderStatus;
      this.showOther = "2"
    },
   onSearch() {
      let params = this.pagingQuery
          params.current = 1
          this.getTableList()
    },
    async getTableList() {
      this.loading = true
      let { size, total, current } = this.pagingQuery
      let res = await listOrder()
      
      if (res.code == 0) {
          size = res.data.size
          this.pagingQuery.total = res.data.total
          current = res.data.current
          
        this.loading = false
        res.data.records.forEach((item) => {
          if (item.orderStatus == "已支付") {
            item.orderStatus2 = 1
          } else if (item.orderStatus == "未支付") {
            item.orderStatus2 = 2
          } else if (item.orderStatus == "已取消") {
            item.orderStatus2 = 3
          }
        })
        this.data = res.data.orders;
      }
    },
    goToPay() {
      this.showOther = "3"
    },
    goToPayPage() {
      this.showOther = "2"
    },
    hepsPay() {
      if(this.selectedRows.length === 0) {
        this.$msg.warning('请勾选要支付的订单项！')
      }
    },
    async cancelOrder_handle(row) {
      const res = await delOrder(row.orderNumber)
      if(res.code === 0) {
        this.$msg.success('该订单已取消！')
        this.getTableList()
      }
    },
    handleSizeChange(current, size) {
      this.pagingQuery.size = size
      this.getTableList()
    },
    handleCurrentChange(page, pageSize) {
      this.pagingQuery.current = page
      this.getTableList()
    },
  },
  created() {
    this.getTableList()
  },
}
</script>

<style lang="scss" scoped>
.order_manage {
  .search_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 16px;
      color: #000;
      font-weight: 600;
    }
    .search {
      display: flex;
      align-items: center;
      .rangePicker {
        margin: 0 5px 0 16px;
      }
    }
  }
  .order_manage_table {
    margin-top: 30px;
    .table-operation {
      position: relative;
      .done {
        &::before {
          content: "";
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: greenyellow;
          top: 50%;
          transform: translate(-50%, -50%);
          left: 3px;
        }
      }
      .no {
        &::before {
          content: "";
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #1890ff;
          top: 50%;
          transform: translate(-50%, -50%);
          left: 3px;
        }
      }
      .cancel {
        &::before {
          content: "";
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: red;
          top: 50%;
          transform: translate(-50%, -50%);
          left: 3px;
        }
      }
    }
  }

  .order_info {
    margin-top: 14px;
    margin-bottom: 24px;
    .order_table {
      margin-top: 24px;
    }
    .pay_confirm_money {
      float: right;
      .product_money,
      .product_discount,
      .product_actual {
        font-size: 14px;
        line-height: 25px;
      }
      .product_money {
        margin-top: 25px;
      }
    }
  }
  .order_pay {
    margin-top: 130px;
    position: relative;
    height: 120px;

    ::v-deep .ant-radio-group {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      .ant-radio-wrapper {
        margin-right: 40px;
      }
    }

    .pay_type_action {
      position: absolute;
      bottom: 0px;
      right: 0px;
      .pay_type_action_inner {
        display: flex;
        align-items: center;
        width: 300px;
        justify-content: space-between;
        .back {
          color: #1890ff;
          cursor: pointer;
        }
        .cancel {
          color: #bcbcbc;
          cursor: pointer;
        }
      }
    }
  }
  // pay
  .pay_container {
    height: 61px;
    background: #fff;
    margin-top: -24px;
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    .pay_container_logo {
      display: flex;
      align-items: center;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 60px;
        height: 61px;
        margin-right: 15px;
      }
    }
  }
  .pay_container_info {
    margin: 50px auto 100px;
    width: 850px;
    height: 350px;
    background: url("../../../assets/image/pay_bg.png");
    background-size: 100% 100%;
    overflow: hidden;
    .pay_info_top {
      margin-top: 30px;
      margin-left: 94px;
      font-size: 15px;
      color: #000;
    }
    .pay_info_mid {
      margin: 20px auto 0px;
      height: 215px;
      padding: 0 70px;
      display: flex;
      align-items: center;
      .left {
        width: 175px;
        height: 175px;
      }
      .right {
        margin-left: 50px;
        .right_item {
          line-height: 30px;
          .right_name {
            color: #000;
          }
        }
        .right_item:last-child {
          margin-bottom: 30px;
        }
      }
    }
    .pay_info_bottom {
      margin-top: 27px;
      text-align: center;
      color: #ccc;
    }
  }
}
</style>